iT邦幫忙

2021 iThome 鐵人賽

DAY 20
2
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 21

Day 20:「資料拿來我就幫你改」- Vue 基礎觀念及常用語法

  • 分享至 

  • xImage
  •  

Day20-Banner

嘿~昨天的內容還行嗎?

「兔兔,昨天突然就接收到大量語法!」

齁,這個我就要說聲不好意思~
原本是應該先介紹基本觀念
但我們今天基本觀念要寫在 SFC 裡面練習,
所以阿,就先介紹一下 SFC 囉~

知道 SFC 之後,
我們就不用去考慮 Vue 掛載問題,
只要把注意力放在生命週期和變數之間的關係啦~!

然後畢竟我們這不是專門的 Vue 系列,
我還是著重在之後的相互配合上哦。

那今天,就讓我們稍微來 Speed Run 一下 Vue 吧!
 

carrotPoint 基本架構

我們雖然要講基本架構,
但是會以 SFC 的結構當作基底。

從 SFC 結構來說,會有以下三塊:

<!-- html 結構 -->
<template>
</template>

<!-- js 邏輯 -->
<script>
</script>

<!-- css 樣式 -->
<style>
</style>

這結構基本與 html 架構無異,
只是分界更明顯,然後沒有 <head>

我們來稍微簡單解釋一下:

template

HTML 結構的放置處,結構中可直接使用 Vue 變數或是與 Vue 中的事件綁定。

script

Vue 與 Javascript 撰寫的地方。撰寫的變數或方法可以在 template 中直接存取。

style

CSS 樣式撰寫的地方,跟一般 CSS 寫法並無差異,如果只有 <style></style> 會是全域的,記得上了 scoped 才不會造成全域汙染。
 

那除了 SFC 之外,
<script> 中也是有結構的。

一般結構會是這樣:

<script>
export default {
  name: "元件名稱",
  props: [],
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  },
  computed: {
    // ...
  },
  components: {
    // ...
  }
}
</script>

我們這邊不介紹 composition API,只會介紹 options API 的部分。

 
其實他就是一個普通的 js 物件。
只是在物件之中所定義的屬性必須是特定的
這樣 Vue 才能看得懂。

其實你也能自定義區塊,
只是如果你沒有對它特別處理,
那基本上對 Vue 來說毫無意義。

來稍微解釋一下各屬性的用途:

name

元件名稱,這會決定你在使用元件時的標籤名稱

props

原意是屬性 (properties),也就是指 html 元素的屬性,前端框架之中都是用屬性來對元件內部傳遞資料

data( )

用於存放要用的變數,data() 中必須回傳物件 {},並將要使用的變數等資料放在物件之中。

methods

撰寫函數的地方,在 methods 中的函數可以接收參數值;當 data 中資料有變動時,methods 中的函數會重新觸發執行重新運算

computed

也是撰寫函數的地方,只是這邊的用法比較特別,而且不像 methods 中的函數一般,computed 不可以接收參數;當 data 中的變動的資料不是該函數所用到的時,該函數不會重新執行重新運算,會直接返回上一次運算後暫存的結果,相對 methods 較不耗效能。

如果覺得聽不懂這邊的敘述,文章看完之後有一個 methods 與 computed 觸發差異的範例可以去看看。

components

幫 Vue 加入元件的地方,將其他 SFC 引用進來之後,要加入 components 中才可以在 template 上使用
 

除了基本結構之外,
最重要的,是生命週期。
 

carrotPoint 生命週期

嗯,我知道看起來很複雜,
我也看不懂 XDD

不過大致上從 Vue 2 到 Vue 3,
options API 的生命週期沒有 (什麼) 變化。

大致上可以用的生命週期有:

  • beforeCreate

  • created

  • beforeMount

  • mounted

  • beforeUpdate

  • updated

  • beforeUnmount

  • unmounted

  • errorCaptured

  • renderTracked

  • renderTriggered

  • activated

  • deactivated

但會不會都用到就看個人。

因為所謂 options API 就是,
這些其實是選擇性的使用!

所以我們可以直接像那些結構,
直接混著加在裡面,
假如我們要在元件掛載成功時顯示 log

那該怎麼去做?
舉例:

<script>
export default {
  name: "Box",
  props: ["number","color"],
  mounted() {
    console.log("Box 元件已掛載!")
  }
}
</script>

我們這樣就把生命週期的 mounted 加進去了,這麼一來在元件掛載完成之後就會顯示 「Box 元件已掛載!」

可以很清楚的發現,
跟前面相比只剩下了 mounted,
其他用不到的都拿掉了,
這就是所謂的選擇性。

生命週期就要自己去看一下文件,
看看那些生命週期都是做些什麼用的,
該用在什麼時候。
 

carrotPoint 魔法指令

前面那些,都不重要啦!

其實也不是不重要,
而是現在這些才是我喜歡的部分!

魔法指令聽起來很魔法,但是真的很魔法

(哩洗咧供啥...)

但在講解魔法指令之前,
我們必須先知道模板語法
因為這關乎到在 template 使用變數的方式。

舉例:

<template>
  <li> {{ content }} </li>
</template>

<script>
export default {
  data() {
    return {
      content: "項目1內容"
    }
  }
}
</script>

從變數名稱對照一下,
可以大概看出 li 渲染之後的內容就會是:

<li> 項目1內容 </li>

而這 {{ }} 就是模板語法,
在這裡面可以直接使用 data 中的變數
也可以直接使用函數回傳的結果,
或是 js 的運算式。

指令

靈活運用 Vue 的魔法指令,
可以讓開發變的超級輕鬆,
無論是流程控制、取值,
又或者是排版,都很有幫助。

雙向資料綁定 v-model

vue 是有雙向綁定的,用 v-model 可以輕鬆的在表單元素上快速取值和賦值;之前在 Day17 中談到使用前端框架的好處時,有說過資料互動上的方便處,而 v-model 正是那最黑魔法的指令,因為當你 input 元件的值改變時,變數內容也已改變,當你修改變數內容時,畫面上 input 元件的值也會隨之改變

這是純 js 的做法:

<input type="text" id="input" oninput="textSync()" />
<div id="show"></div>

<script>
function textSync() {
  const input = document.getElementById("input")
  const show = document.getElementById("show")
  
  show.innerText = input.value
}
</script>

使用 v-model 只需要這樣:

<template>
  <input type="text" v-model="content" />
  <div>{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

這樣他就會直接把變數 content 與 input 元素的值做雙向綁定,不像是純 js 還需要定義 id 名稱去抓取 DOM 元素然後再向將內容渲染到指定的元素上。

渲染控制 v-if

在 html 元素上做判斷式是從前想也想不到的事情,但透過前端框架這件事情可以輕鬆實現,尤其是 vue。

透過 v-if 可以使用變數內容或函數輸出的結果值來做判斷式true 則顯示元素,false不渲染到頁面上

<template>
  <div v-if="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

另還有 v-elseif 和 v-else,這邊就不介紹了。

顯示控制 v-show

在視覺上和 v-if 實現的效果差不多,但根本上是不一樣的。 v-if 判斷式結果為 false 時是直接不渲染元素內容,而 v-show 則是渲染到頁面上但利用 CSS 的 display:none; 將元素隱藏。

<template>
  <div v-show="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

迴圈 v-for

這個也很黑魔法啦! 既然有 if 當然要有 for 啊! 這可是寫程式的標配欸。 v-for 可以從變數或者函數回傳的陣列、物件之類的內容來使元素或元件重複,這在做清單列表、圖庫等等重複性高的畫面時超級無敵實用!

單純數量的 v-for:

<template>
  <div v-for="count in 30">數字 {{count}}</div>
</template>

這樣就會有 30 個 div,然後內容是從 1 列到 30 了!

如果是從變數的話:

<template>
  <div v-for="dir in dirs">方向:{{dir}}</div>
</template>

<script>
export default {
  data() {
    return {
      dirs: ["上","左","下","右"]
    }
  }
}
</script>

所以有些資料是從 api 取得,我們就可以利用生命週期 mounted 等等的組合來完成。

像是:

<template>
  <div>
    導航路徑:
    <div v-for="path in paths">{{path}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paths: []
    }
  },
  mounted() {
    // 假設這是 api 取得的資料
    const p = []
    
    for(let i=0;i<30;i++){
      p.push(i)
    }
    
    // 在 template 之外的地方存取 data 中的變數或其他函數時,前面必須加上 `this`
    // 將取得到的資料存回 data 中的變數
    this.paths = p
  }
}
</script>

 
另外兩個常見指令會更常用到,但跟前面使用起來的感覺不太相同。我們接著繼續看。

屬性綁定 v-bind

用途在於把資料綁定在屬性上,也是元件傳遞的一把關鍵鑰匙。原本 html 元素上的屬性都是固定值,要使用 js 改變它的內容其實有點小麻煩。 但是有了 v-bind 之後再也不用煩惱,可以讓元素的屬性值隨變數內容改變

舉例:

<template>
  <div v-bind:id="id"> # {{id}}</div>
</template>

<script>
export default {
  data() {
    return {
      id: "test"
    }
  }
}
</script>

基本上 html 元素具有的屬性都能夠綁定,也可以綁定自定義的屬性,前面說過的元件的 props 就可以讀取到這些屬性的值。

如果覺得 v-bind 前綴很長,也可以縮短成:

<div v-bind:id="id"> # {{id}}</div>

<!-- 縮短 -->
<div :id="id"> # {{id}}</div>

 

事件綁定 v-on

綁定事件用,用法與 v-bind 相同,可以使事件發生時觸發綁定的函數或者執行一行 js 的陳述式。同時,這是元件資料傳遞的另一把鑰匙

執行一行陳述式,舉例:

<template>
  <div>
    {{ num }}
    <div v-on:click="num=0">歸零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  }
}
</script>

呼叫函數的舉例:

<template>
  <div>
    {{ num }}
    <div v-on:click="clear()">歸零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  },
  methods: {
    clear() {
      this.num = 0
    }
  }
}
</script>

也是與 v-bind 相同,基本上預設有提供的事件都能夠綁定。也可以綁定自訂事件,但這就與元件資料傳遞有關,之後會提到。

預設,v-on 也是可以縮短語法的:

<div v-on:click="clear()">歸零</div>

<!-- 縮短 -->
<div @click="clear()">歸零</div>

 

會,很燒腦嗎?
基本上這些東西是熟能生巧,
這些東西大概用了幾遍就會熟悉了。

其實寫 Vue 的時候,
真的就是不斷使用上面這些內容而已,
只是用法就要因應你需要的功能去做調整。

那就大概這樣了!
如果 vue 還不熟的話盡量多看一兩次,
那下面也會提供我覺得不錯的資源~
先躺了! (Zz..Zz...)
 

carrotPoint 給你們的回家作業:

  • 作業實施要點:
    • 複習 Day17 到 Day20
    • 大概記一下今天的內容
  • methods、computed 觸發差異範例:有種你點點看
  • 超推的 Vue 學習資源:Vue.js 008
     

關於兔兔們:


 


( # 兔兔小聲說 )

你們信教嗎?

「嘖嘖你這隻兔子,一定又要說什麼兔兔教了吼!!」

錯了,這你就有所不知了...
此時此刻,我是回籠教的。

兔兔 :

 
因為我現在的主要任務
是睡覺。


上一篇
Day 19:「通通拿去做雞精啦!」- Vue SFC
下一篇
Day 21:「爸爸說,家裡要重新裝潢了」- 關於樣式的屬性綁定講解
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言